<template>
	<view class="container">
		<view class="title_box">
			<text class="title_text">我 去 图 书 馆</text>
			<view class="avator_box">
				<u-image class="avator" width="200rpx" height="200rpx" :src="avatorSrc"></u-image>
			</view>
			<text class="name">薛丹</text>
		</view>
		<view class="content">
			<view class="box">
				<text class="name">武汉纺织大学</text>
				<text class="tip">注意：一年只能解绑一次</text>
			</view>
			<u-button type="permary" style="background-color: #5f85bb;color: #FFFFFF;margin-bottom: 20rpx;width: 90%">解绑(学号：{{studentNumber}})</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatorSrc: '../../../static/001.jpg',
				appHeight: 0,
				appWidtht: 0,
				studentNumber: 1707270119
			};
		}
	}
</script>

<style lang="scss">
	* {
		padding: 0;
		margin: 0;
	}

	// 背景自适应
	uni-page-body {
		height: 100%;
	}

	.container {
		height: 100%;
		width: 100%;
		background-color: #e2e6ee;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title_box {
			width: 100%;
			height: 30%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			background-color: #5c84bf;

			.title_text {
				color: #FFFFFF;
				font-size: 50rpx;
				font-weight: 900;
			}

			.avator_box {
				border-radius: 100rpx;
				height: 200rpx;
				width: 200rpx;
				overflow: hidden;
			}

			.name {
				color: #FFFFFF;
				font-size: 40rpx;
			}
		}
		
		.content {
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			
			.box {
				height: 250rpx;
				width: 200%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				
				.name {
					margin-top: 100rpx;
					font-size: 35rpx;
					font-weight: 900;
				}
				.tip {
					color: red;
				}
			}
		}

	}
</style>

